<script setup>
import { onMounted } from "vue";
import * as THREE from "three";
import * as Cesium from "cesium";
import * as dat from "dat.gui";
import FogEffect from "../weather/fog";
import HighFogEffect from "../weather/highFog";
import TCesium from "@/utils/TCesium.js";

let tCesium;
const loader = new THREE.FileLoader();
THREE.Cache.enabled = true;
loader.setResponseType("json");
function animate() {
  tCesium.renderCesium();
  tCesium.renderThree();
  requestAnimationFrame(animate);
}
// 添加太阳光晕
function addSolarHalo() {
  // 启用太阳光照
  tCesium.cesium.viewer.scene.globe.enableLighting = true;
  // 开启阴影（增强真实感）
  tCesium.cesium.viewer.shadows = true;
  tCesium.cesium.viewer.shadowMap.darkness = 0.5; // 阴影强度
  const lensFlare = tCesium.cesium.viewer.scene.postProcessStages.add(
    Cesium.PostProcessStageLibrary.createLensFlareStage()
  );
  const viewModel = {
    show: true,
    // 光强
    intensity: 10.0,
    // 影响半音效果扭曲的标量值
    distortion: 10.0,
    dispersion: 1.0,
    // 表示来自鬼散的光晕的宽度
    haloWidth: 1.0,
    // 表示镜头上污垢量的标量
    dirtAmount: 1.0,
  };

  function updatePostProcess() {
    lensFlare.enabled = Boolean(viewModel.show);
    lensFlare.uniforms.intensity = Number(viewModel.intensity);
    lensFlare.uniforms.distortion = Number(viewModel.distortion);
    lensFlare.uniforms.ghostDispersal = Number(viewModel.dispersion);
    lensFlare.uniforms.haloWidth = Number(viewModel.haloWidth);
    lensFlare.uniforms.dirtAmount = Number(viewModel.dirtAmount);
    lensFlare.uniforms.earthRadius = Cesium.Ellipsoid.WGS84.maximumRadius;
  }
  updatePostProcess();
}
// 添加动态云层
function addDynamicCloud() {
  let west = -180,
    east = 180;
  tCesium.cesium.viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(west, -90, east, 90),
      height: 20000,
      // extrudedHeight: 10,
      material: new Cesium.ImageMaterialProperty({
        image: "earth_cloud.png",
        transparent: true,
      }),
      show: true,
    },
  });
}
onMounted(() => {
  tCesium = new TCesium("cesiumContainer", [-180, -90], [180, 90]);
  window.tCesium = tCesium;
  tCesium.cesium.viewer.scene.globe.depthTestAgainstTerrain = true;
  animate();
  // 添加线性雾
  // new FogEffect(tCesium.cesium.viewer, {
  //   visibility: 0.5,
  //   color: new Cesium.Color(0.8, 0.82, 0.84, 1.0),
  //   minDistance: 10000.0,
  //   maxDistance: 1000000.0,
  // });
  // 添加高度雾
  new HighFogEffect(tCesium.cesium.viewer, {
    visibility: 0.5,
    maxHeight: 600.0,
    color: new Cesium.Color(0.8, 0.82, 0.84, 1.0),
  });
  // 添加太阳光晕
  addSolarHalo();
  // 添加动态云层
  // addDynamicCloud();
});
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
